const ReaderTable = {
    name: 'ReaderTable',
    template: `
      <table>
        <thead>
        <tr>
            <th>学号/工号</th>
            <th>姓名</th>
            <th>年级专业</th>
            <th>性别</th>
            <th>读者相片</th>
            <th>读者类型</th>
            <th>借书额度</th>
            <th>邮箱地址</th>
            <th>联系电话</th>
            <th>所属部门ID</th>
            <th>读者状态</th>
            <th>创建时间</th>
            <th>更新时间</th>
            <th>创建人</th>
            <th>更新人</th>
            <th>备注</th>
            <th>部门ID</th>
            <th>关联的用户ID</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用v-for指令遍历readers数组，为每个读者生成一行 -->
        <tr v-for="reader in readers" :key="reader.readerId">
            <td>{{ reader.readerNumber }}</td>
            <td>{{ reader.name }}</td>
            <td>{{ reader.gradeMajor }}</td>
            <td>{{ getGenderText(reader.gender) }}</td>
            <td>
                <!-- 根据是否有相片URL，决定显示相片图片还是显示“无” -->
                <div v-if="reader.avatarUrl" class="preview">
                    <img :src="reader.avatarUrl" alt="相片预览" style="max-width: 50px; max-height: 50px;">
                </div>
                <div v-else>无</div>
            </td>
            <td>{{ getTypeText(reader.type) }}</td>
            <td>{{ reader.borrowLimit }}</td>
            <td>{{ reader.email }}</td>
            <td>{{ reader.phone }}</td>
            <td>{{ reader.departmentId }}</td>
            <td>{{ getStatusText(reader.status) }}</td>
            <td>{{ reader.createdTime }}</td>
            <td>{{ reader.updatedTime }}</td>
            <td>{{ reader.createdBy }}</td>
            <td>{{ reader.updatedBy }}</td>
            <td>{{ reader.remark }}</td>
            <td>{{ reader.deptId }}</td>
            <td>{{ reader.userId }}</td>
            <td>
                <!-- 编辑和删除按钮，点击时触发相应的事件 -->
                <button style="margin-right: 5px" @click="$emit('edit', reader)">编辑</button>
                <button @click="$emit('delete', reader.readerId)">删除</button>
            </td>
        </tr>
        </tbody>
      </table>
    `,
    props: {
        readers: {
            type: Array,
            default: () => [],
        }
    },
    setup() {
        const getStatusText = (status) => {
            const statusMap = {
                1: '活跃',
                0: '禁用'
            }
            return statusMap[status] || '未知'
        }

        const getTypeText = (type) => {
            const typeMap = {
                1: '学生',
                2: '职工'
            }
            return typeMap[type] || '未知'
        }

        const getGenderText = (type) => {
            const typeMap = {
                F: '女',
                M: '男'
            }
            return typeMap[type] || '未知'
        }

        return { getStatusText, getTypeText, getGenderText };
    }
};